<template>
	<view>
		<cu-custom bgColor="bg-maincolor" :isBack="true">
			<block slot="content">
				企业编辑
			</block>
		</cu-custom>

		<view>
			<view class="apply_boxone">
				<view>企业资料</view>
			</view>
			<view class="apply_box flex">
				<view class="con_text">名称</view>
				<input @input="inputEvent" class="con_infom" placeholder="请输入公司名称" v-model="company_name">
			</view>
			<view class="apply_box flex">
				<view class="con_text">联系方式</view>
				<input class="con_infom" placeholder="请输入电话号码" v-model="phone" />
			</view>
			<view class="apply_box flex">
				<view class="con_text">联系人</view>
				<input class="con_infom" placeholder="请输入联系人姓名" v-model="contacts" />
			</view>
			<view class="apply_box flex">
				<view class="con_text">地址</view>
				<input class="con_infom" placeholder="请输入公司地址" v-model="address" />
				<!-- <view v-if="res.result" class="con_infom">{{apply_list.address}}</view> -->
			</view>
			<view class="logo_box flex">
				<view class="con_text">企业logo</view>
				<view class="con_infom">
					<wzh-upload :count="1" :value.sync="logo">
						<image :src="logo" class="logo_img" mode="aspectFill"></image>
					</wzh-upload>
				</view>
			</view>

			<!-- 标签添加 -->
			<view class="addBox">

				<view class="add_box flex">
					<view class="tag_text">企业标签</view>
					<view class="con_infom add_tag" @tap="showAddModel" data-target="bottomModal">+添加</view>
				</view>

				<view class="tag_btn">
					<!-- 标签 -->
					<view v-for="(item,index) in tags" :key="inde" class="tagBox flex" @tap="removeTag(index)">
						<view class="tag_box">{{item}}</view>
						<view class="close_box cuIcon-close"></view>
					</view>
				</view>

			</view>
		</view>
		<!-- 底部按钮 -->
		<view class="cu-bar tabbar bg-white foot">
			<button class="cancel_but" @tap="back()">取消</button>
			<button class="submit_but" @tap="display()">提交</button>
		</view>

		<!-- 弹出框 -->
		<view class="cu-modal bottom-modal" :class="modalName=='bottomModal'?'show':''">
			<view class="cu-dialog">
				<view class="modal_box">
					<view class="control_box flex">
						<view class="apply_text">企业标签</view>
						<text class="cancel_text iconfont icon-guanbi" @tap="closModal"></text>
					</view>
					<view class="imput_information">

						<view class="input_box flex">
							<text class="linkman">企业标签</text>
							<input placeholder="请填写标签" style="margin-left: 58rpx; text-align: left;"
								v-model="tag_name" />
						</view>
						<view>
							<button class="button_apply" @tap="addTag">确定</button>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const {
		appLogin,
		httpGet,
		httpPost,
		msg
	} = require("@/utils/common.js")
	export default {
		data() {
			return {
				msg: '',
				company_id: 0,
				tag_name: '',
				modalName: null,
				company_name: '1',
				phone: '1',
				contacts: '1',
				address: '1',
				apply_list: [],
				tags: [],
				msg: '',
				logo: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg3.duitang.com%2Fuploads%2Fitem%2F201508%2F25%2F20150825223259_ds5rL.jpeg&refer=http%3A%2F%2Fimg3.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1636767909&t=653310684e05922336f9e15c6abd39e4'
			}
		},
		onLoad(option) {
			appLogin((user_info) => {
				console.log(user_info)
				this.company_id = option.company_id
				console.log(this.company_id)
				this.companyInfo()
			})
		},
		methods: {
			// 防抖,在文本中当我输入值时,我一旦停止输入超过一秒我就触发
			// inputEvent(e){
			// 	clearTimeout(this.timer)
			// 	this.timer = setTimeout(()=>{
			// 		console.log('触发成功')
			// 	},1000)
			// },
			back(){
				uni.navigateTo({
					url:'people_center'
				})
			},
			display() {
				httpPost({
					url:'/api/company/save',
					data:{
						company_name:this.company_name,
						logo:this.logo,
						contacts:this.contacts,
						phone:this.phone,
						address:this.address,
						tags:this.tags
					}
				}).then(res => {
					uni.redirectTo({
						url: 'people_center'
					})
				}).catch((err)=>{
					console.log(err)
					msg(err.msg,'none')
				})
			},
			// 弹出框输入框内容为空
			showAddModel(e) {
				this.tag_name = ""
				this.showModal(e)
			},
			// 删除点击的标签
			removeTag(index) {
				console.log(index)
				this.tags.splice(index, 1)
			},
			// 弹框消失
			closModal(e) {
				this.modalName = null
			},
			// 增加标签
			addTag() {
				this.tags.push(this.tag_name);
				this.closModal()
			},
			// 弹出框
			showModal(e) {
				this.modalName = e.currentTarget.dataset.target
			},
			// 返回事件
			cancel() {
				uni.navigateBack()
			},
			companyInfo() {
				httpGet({
					url: '/api/company/info',
					data: {
						company_id: this.company_id
					}
				}).then(res => {
					console.log(res)
					this.phone = res.result.phone
					this.company_name = res.result.company_name
					this.logo = res.result.logo
					this.contacts = res.result.contacts
					this.address = res.result.address
					this.tags = res.result.tags
				})
			}
		}
	}
</script>

<style>
	.apply_boxone {
		height: 90rpx;
		line-height: 90rpx;
		background-color: #efefef;
		font-size: 30rpx;
		padding-left: 38rpx;
		color: #333333;
	}

	.apply_box {
		height: 90rpx;
		line-height: 90rpx;
		padding-left: 38rpx;
		background-color: #FFFFFF;
		border-width: 2rpx;
		border-bottom-style: solid;
		border-color: #e6e6e6;
	}

	.con_text {
		color: #989898;
		font-size: 30rpx;
	}

	.con_infom {
		position: absolute;
		right: 35rpx;
		color: #333333;
		font-size: 30rpx;
		text-align: right;
		line-height: 90rpx;
		height: 90rpx;
		width: 750rpx;
	}

	.cancel_but {
		border-radius: 90rpx;
		border-width: 1rpx;
		border-style: solid;
		border-color: #3b73f6;
		text-align: center;
		height: 80rpx;
		width: 335rpx;
		line-height: 80rpx;
		color: #3b73f6;
		font-size: 30rpx;
	}

	.submit_but {
		border-radius: 90rpx;
		border-width: 1rpx;
		border-style: solid;
		background-color: #3b73f6;
		text-align: center;
		height: 80rpx;
		width: 335rpx;
		line-height: 80rpx;
		color: #FFFFFF;
		font-size: 30rpx;
	}

	.logo_box {
		height: 120rpx;
		line-height: 120rpx;
		padding-left: 38rpx;
		background-color: #FFFFFF;
		padding-top: 10rpx;
	}

	.logo_img {
		width: 100rpx;
		height: 100rpx;
		line-height: 120rpx;
		border-radius: 180rpx;
	}

	.tag_btn {
		background-color: #FFFFFF;
		padding-top: 40rpx;
		padding-left: 30rpx;
		padding-bottom: 67rpx;
		width: 100%;
		display: flex;
		flex-flow: row wrap;
		/* align-content: flex-start; */
	}

	.tagBox {
		height: 54rpx;
		position: relative;
		margin-bottom: 15rpx;
	}

	.tag_box {
		height: 54rpx;
		padding-left: 25rpx;
		padding-right: 25rpx;
		border-color: #3b73f6;
		border-width: 1rpx;
		border-style: solid;
		text-align: center;
		margin-right: 20rpx;
		line-height: 54rpx;
		border-radius: 8rpx;
		color: #3b73f6;
		font-size: 26rpx;
	}

	.close_box {
		position: absolute;
		top: -10rpx;
		right: 10rpx;
		font-size: 20rpx;
		color: #FFFFFF;
		background-color: #F43F3B;
		width: 20rpx;
		height: 20rpx;
		border-radius: 180rpx;
		line-height: 20rpx;
		font-weight: bold;
	}

	.addBox {
		background-color: #FFFFFF;
	}

	.add_box {
		height: 90rpx;
		line-height: 90rpx;
		padding-left: 38rpx;
		background-color: #efefef;
	}

	.tag_text {
		color: #333333;
		font-size: 30rpx;
	}

	.con_infom {
		position: absolute;
		right: 35rpx;
		color: #333333;
		font-size: 30rpx;
		text-align: right;
		line-height: 90rpx;
		height: 90rpx;
		width: 750rpx;
	}

	.add_tag {
		color: #3b73f6;
	}

	.modal_box {
		height: 500rpx !important;
	}

	.cu-modal.bottom-modal .cu-dialog {
		border-radius: 30rpx 30rpx 0 0 !important;
	}

	.control_box {
		margin-top: 35rpx;
	}

	.apply_text {
		font-size: 35rpx;
		color: #333333;
		margin-left: 314rpx;
	}

	.cancel_text {
		font-size: 26rpx;
		color: #c6c6c6;
		margin-left: 245rpx;
		margin-top: 7rpx;
	}

	.imput_information {
		margin-top: 58rpx;
	}

	.input_box {
		width: 684rpx;
		margin: auto;
		border-style: solid;
		border-color: #e5e5e5;
		border-width: 2rpx;
		height: 105rpx;
		border-radius: 10rpx;
		padding: 33rpx 25rpx;
	}

	.linkman {
		margin-left: 15rpx;
		font-size: 30rpx;
		color: #333333;
	}

	.button_apply {
		width: 688rpx;
		margin: auto;
		margin-top: 180rpx;
		background-color: #3b73f6;
		color: #FFFFFF;
		font-size: 30rpx;
		text-align: center;
		line-height: 98rpx;
		height: 98rpx;
		border-radius: 15rpx;
	}

	.right_box {
		position: absolute;
		margin-top: 48rpx;
		color: #FFFFFF;
		font-size: 25rpx;
	}
</style>
